.atomLoader {
    box-sizing: content-box;
    color: $white
}

.atomLoader-container {
  margin: 0 auto 20px auto;
  position: relative;
  display:flex;
  align-items:center;
  justify-content:center;
  width: 130px;
  height: 130px;
  animation: atomRotate 25s linear infinite;
  will-change: transform
}


.atomLoader-item,
.atomLoader-item2,
.atomLoader-item3 {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0px;
  left: -8px;
  border-right: 6px solid $white;
  border-left: 6px solid $white;
  border-radius: 100%;
}

.atomLoader-item {
  animation: atomLoader-item 2s linear infinite;
}

.atomLoader-item2 {
  animation: atomLoader-item2 3s linear infinite;
  animation-delay: -1s
}

.atomLoader-item3 {
  animation: atomLoader-item3 4s linear infinite;
}

.atomLoader-proton {
  width:10px;
  height:10px;
  border-radius:50%;
  background: $white;
  animation: atomRotate 20s linear infinite reverse;
}

.atomLoader-text {
    position: relative;
    text-align: center;
    color: inherit;
}

.atomLoader-text:empty { display: none }

.atomLoader-text::after {
    position: absolute;
    overflow: hidden;
    display: inline-block;
    animation: ellipsis steps(4,end) 900ms infinite;
    content: "\2026"; /* ascii code for the ellipsis character */
    width: 0px;
}


.atomLoader.primary {
    color: $primary;
    .atomLoader-proton { background: $primary }
    .atomLoader-item,
    .atomLoader-item2,
    .atomLoader-item3 { border-color: $primary }
}

.atomLoader.dark {
    color: $secondary;
    .atomLoader-proton { background: $secondary }
    .atomLoader-item,
    .atomLoader-item2,
    .atomLoader-item3 { border-color: $secondary }
}

@keyframes atomLoader-item {
  from { transform: rotateZ(120deg) rotateX(70deg) rotateZ(0deg) }
  to { transform: rotateZ(120deg) rotateX(70deg) rotateZ(360deg) }
}

@keyframes atomLoader-item2 {
  from { transform: rotateZ(60deg) rotateX(70deg) rotateZ(0deg) }
  to { transform: rotateZ(60deg) rotateX(70deg) rotateZ(360deg) }
}

@keyframes atomLoader-item3 {
  from { transform: rotateZ(360deg) rotateX(70deg) rotateZ(0deg) }
  to { transform: rotateZ(360deg) rotateX(70deg) rotateZ(360deg) }
}

@keyframes atomRotate {
  to { transform:rotate(360deg) }
}

@keyframes ellipsis {
  to { width: 1.25em }
}

@-webkit-keyframes ellipsis {
  to { width: 1.25em }
}


@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    /* IE10+ specific styles go here */
    .atomLoader-container .atomLoader-item,
    .atomLoader-container .atomLoader-item2,
    .atomLoader-container .atomLoader-item3,
    .atomLoader-container .atomLoader-proton { display: none }

    .atomLoader-container,
    .atomLoader-container .atomLoader-item,
    .atomLoader-container .atomLoader-item2,
    .atomLoader-container .atomLoader-item3,
    .atomLoader-container .atomLoader-proton,
    .atomLoader .atomLoader-text::after { animation: none }

    .atomLoader-text::after { width: auto }

    .atomLoader-container { background: url(assets('img/loaders/decrypt.gif')) no-repeat center center }
    .atomLoader.primary .atomLoader-container { background-image: url(assets('img/loaders/decrypt1.gif')) }

    /* use data-uri ! */
    .pm-loader-fullpage .atomLoader-container { background-image: url('') }
}
